<template>
	<uni-forms ref="valiFormRef" :rules="rules" :modelValue="valiFormData" label-position="top">
		<uni-forms-item label="记录时间"  name="time">
			<uni-datetime-picker type="datetime" v-model="valiFormData.time" :clear-icon="false"/>
		</uni-forms-item>
		<uni-forms-item label="体温"  name="actualMilkAmount">
			<uni-easyinput v-model="valiFormData.actualMilkAmount" type="number" placeholder="请输入体温" >
				<template #right>
					<view>℃摄氏度</view>
				</template>
			</uni-easyinput>
		</uni-forms-item>
		<uni-forms-item label="备注" name="remark">
			<uni-easyinput type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" />
		</uni-forms-item>
		<uni-forms-item label="上传图片" name="file">
			<upload-file v-model="valiFormData.fileList"></upload-file>
		</uni-forms-item>
	</uni-forms>
</template>

<script  setup>
	import {reactive,ref,computed} from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import dayjs from 'dayjs'
	import {getHistoryDataById} from '@/utils/index.js'
	// 校验规则
	const rules= {
		actualMilkAmount: {
			rules: [{
				required: true,
				errorMessage: '体温不能为空'
			}, {
				format: 'number',
				errorMessage: '体温只能输入数字'
			}]
		},
		time: {
			rules: [{
				required: true,
				errorMessage: '时间不能为空'
			}]
		}
	}
	
	
	const imgPath = ref('')
	
	const valiFormData= reactive({
		time: '',
		actualMilkAmount: '',
		remark: '',
		fileList: []
	})
	
	
	
	onLoad((options)=>{
		console.log(options,'组件内');
		if(options.id){
			let data = getHistoryDataById(options.id)
			console.log(data,'需要修改的数据');
			Object.keys(valiFormData).forEach((key)=>{
				valiFormData[key] = data[key]
			})
		}else{
			valiFormData.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
		}
	})
	
	
	
	const valiFormRef = ref(null)
	
	const submit = ()=>{
		console.log('触发校验',valiFormRef.value,valiFormData);
		return new Promise((resolve,reject)=>{
			valiFormRef.value.validate().then(res => {
				console.log('success', res,valiFormData);
				resolve({
					...valiFormData,
				})
			}).catch(err => {
				reject(err)
			})
		})
		
	}
	
	defineExpose({
		submit
	})
	
	
</script>

<style>
</style>